<template>
	<div class="tabs">
		<p  v-for="(item , index) in list" :key="item.id" :style="'background-image: url(\''+item.imgURL+'\')'">
			{{item.word}}
			<span v-if="index==0">{{item.sou}}</span>
		</p>
	</div>
	
</template>

<script>
	export default{
		name:'Tabs',
		data(){
			return{
				list:[
					{id:1,imgURL:'igs/6.png',word:'主题游',sou:'个性独创'},
					{id:2,imgURL:'igs/7.png',word:'亲子游'},
					{id:3,imgURL:'igs/8.png',word:'摄影游'},
					{id:4,imgURL:'igs/9.png',word:'户外游'},
					{id:5,imgURL:'igs/10.png',word:'活动赛事'},
					{id:6,imgURL:'igs/11.png',word:'瑜伽行'},
					{id:7,imgURL:'igs/12.png',word:'野奢帮'},
					{id:8,imgURL:'igs/13.png',word:'定制游'},
					{id:9,imgURL:'igs/14.png',word:'签证'},
					{id:10,imgURL:'igs/15.png',word:'邮轮'},
					{id:11,imgURL:'igs/16.png',word:'美宿度假'},
				],	
			}
		}
	}
</script>

<style scoped>
	.tabs{
		padding-top: 0.3rem;
		width: 90%;
		margin: auto;
		text-align: center;
		height: 4rem;

	}
	.tabs p:nth-child(1){
		width: 25%;
		height: 2.59rem;
		background: url(../../../../public/igs/6.png);
		background-size: 100%;
		
	}
	.tabs p{
		font-size: 0.4rem;
		font-weight: bold;
		flex-direction: column;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		background-size: 100%;
		width: 25%;
		height: 1.3rem;
	
	}
	.tabs p span{
		font-weight: normal;
		margin-top: 0.1rem;
		height: 0.36rem;
		font-size: 0.3rem;
		border-radius: 0.1rem;
		width: 75%;
		background-color: #ffdd40;
		display: inline-block;
	}
	
	
</style>
